In [34]:
import networkx as nx
import math

Load data


In [55]:
data = open('/var/datasets/wdc/small-pld-arc')
G = nx.DiGraph()

In [56]:
for line in data:
    ijstr = line.split('\t')
    
    i=int(ijstr[0])
    j=int(ijstr[1])
    
    if i>20000:
        break
    if j>20000:
        continue
    G.add_edge(i,j)

In [57]:
data.close()

Draw graph

Remove nodes with 0 in degree


In [59]:
G2 = G.copy()

for (node, indeg) in G2.in_degree_iter():
        if indeg==0:
            G2.remove_node(node)

Make size proportional to in-degree


In [58]:
for (node, indeg) in G2.in_degree_iter():
        if indeg==0:
            G2.remove_node(node)

In [14]:
#nx.draw_spring(G2,nodelist=d.keys(), node_size=[(v+1) * 100 for v in d.values()])

In [88]:
for (node, indeg) in G2.in_degree_iter():
        if indeg<20:
            G2.remove_node(node)

In [5]:
G2 = G
d = G2.in_degree()

In [8]:
nx.draw_random(G2,nodelist=d.keys(), node_size=[math.log(v+1) * 30 for v in d.values()])

In [89]:
G2.size()


Out[89]:
3852

Convert to Javascript for interactivity


In [61]:
from IPython.core.display import display_javascript, display_html
#from IPython.frontend.html.notebook import visutils as vis
import json
import time

In [29]:
g=G2
with open('graph.json', 'w') as f:
    json.dump({'nodes': [{'index': i, 
                          'name': str(g.nodes()[i]),
                          'club': "Mr. Hi" } #g.node[i]['club']}
                              for i in range(len(g.nodes()))],
               'links': list(map(lambda u: 
                            {'source': u[0],
                             'target': u[1]}, g.edges()))}, 
              f, indent=4,)

In [10]:
g=nx.karate_club_graph()
with open('graph.json', 'w') as f:
    json.dump({'nodes': [{'name': str(i),
                          'club': g.node[i]['club']}
                              for i in g.nodes()],
               'links': list(map(lambda u: 
                            {'source': u[0],
                             'target': u[1]}, g.edges()))}, 
              f, indent=4,)

In [64]:
g.nodes()[2]


Out[64]:
2

In [60]:
g=nx.Graph()
g.add_edge(0,1)
g.add_edge(3,4)
g.add_node(2)
with open('graph.json', 'w') as f:
    json.dump({'nodes': [{'name': str(i),
                          'club': "Mr. Hi"}
                              for i in g.nodes()],
               'links': list(map(lambda u: 
                            {'source': u[0],
                             'target': u[1]}, g.edges()))}, 
              f, indent=4,)

In [62]:
from networkx.readwrite import json_graph

In [90]:
d = json_graph.node_link_data(G2)
json.dump(d, open('graph.json','w'))

In [134]:
%%html
<head>
    <title>Force-Directed Layout</title>
    <script type="text/javascript" src="d3/d3.min.js"></script>
    <script type="text/javascript" src="d3/d3.geom.min.js"></script>
    <script type="text/javascript" src="d3/d3.layout.min.js"></script>
    <link type="text/css" rel="stylesheet" href="force.css"/>
</head>
<body>
    <div id="chart"></div>
    <script type="text/javascript" src="graph.json"></script>
</body>


Force-Directed Layout

In [67]:
G2.size()


Out[67]:
5364

In [92]:
%%html
<div id="d3-example"></div>
<style>
.node {stroke: #fff; stroke-width: 1.5px;}
.link {stroke: #999; stroke-opacity: .6;}
</style>



In [93]:
%%javascript
// We load the d3.js library from the Web.
require.config({paths: {d3: "http://d3js.org/d3.v3.min"}});
require(["d3"], function(d3) {
    // The code in this block is executed when the 
    // d3.js library has been loaded.
    
    // First, we specify the size of the canvas containing
    // the visualization (size of the <div> element).
    var width = 600,
        height = 600;

    // We create a color scale.
    var color = d3.scale.category10();

    // We create a force-directed dynamic graph layout.
    var force = d3.layout.force()
        .charge(-90)
        .linkDistance(30)
        .gravity(0.35)
        .size([width, height]);

    // In the <div> element, we create a <svg> graphic
    // that will contain our interactive visualization.
    var svg = d3.select("#d3-example").select("svg")
    if (svg.empty()) {
        svg = d3.select("#d3-example").append("svg")
                    .attr("width", width)
                    .attr("height", height);
    }
        
    // We load the JSON file.
    d3.json("graph.json", function(error, graph) {
        // In this block, the file has been loaded
        // and the 'graph' object contains our graph.
        
        // We load the nodes and links in the force-directed
        // graph.
        force.nodes(graph.nodes)
            .links(graph.links)
            .start();

        // We create a <line> SVG element for each link
        // in the graph.
        var link = svg.selectAll(".link")
            .data(graph.links)
            .enter().append("line")
            .attr("class", "link");

        // We create a <circle> SVG element for each node
        // in the graph, and we specify a few attributes.
        var node = svg.selectAll(".node")
            .data(graph.nodes)
            .enter().append("circle")
            .attr("class", "node")
            .attr("r", 5)  // radius
            .style("fill", function(d) {
                // The node color depends on the club.
                return color(d.club); 
            })
            .call(force.drag);

        // The name of each node is the node number.
        node.append("title")
            .text(function(d) { return d.name; });

        // We bind the positions of the SVG elements
        // to the positions of the dynamic force-directed graph,
        // at each time step.
        force.on("tick", function() {
            link.attr("x1", function(d) { return d.source.x; })
                .attr("y1", function(d) { return d.source.y; })
                .attr("x2", function(d) { return d.target.x; })
                .attr("y2", function(d) { return d.target.y; });

            node.attr("cx", function(d) { return d.x; })
                .attr("cy", function(d) { return d.y; });
        });
    });
});



In [128]:
json_graph.node_link_data?

In [137]:
from IPython.display import HTML
HTML('<iframe src=force.html width=700 height=350></iframe>')


Out[137]:

In [ ]: